<template>
	<view class="addition-MP">
		<uv-popup ref="popup" mode="top" :closeOnClickOverlay="false" :bgColor="false" overlayOpacity="0.7" @change="change">
			<view class="addition-box" :style="{ '--top-bar-height': mp.topBarHeight + 'px'}">
				<!-- #ifdef MP-WEIXIN -->
				<image class="_image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/share-jc.png"></image>
				<!-- #endif -->
				
				<!-- #ifdef MP-TOUTIAO -->
				<image class="_image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/share-dy-jc2.png"></image>
				<!-- #endif -->
				<view class="closeBtn"  @tap.stop.prevent="close">知道啦</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import mp from '@/mixins/mp.js';
	const app = getApp();
	export default {
		mixins: [mp],
		data() {
			return {
				right: '12rpx',
				top: 0,
			};
		},
		props: {},
		methods: {
			close() {
				this.$refs.popup.close();
			},
			show() {
				this.$refs.popup.open();
			},
			change(e){
				this.$emit('change',e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.addition-MP {
		.addition-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: calc(var(--top-bar-height) + 21rpx);
		}

		._image {
			width: 516rpx;
			height: 737rpx;
			margin-bottom: 100rpx;
		}

		.closeBtn {
			width: 239rpx;
			height: 74rpx;
			background: rgba(216, 216, 216, 0);
			border-radius: 46rpx;
			border: 2rpx solid #FFFFFF;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 74rpx;
			text-align: center;
			margin-left: -38rpx;
		}
	}
</style>